﻿<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>响应式布局检测工具 - 织梦无忧论坛</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="copyright" content="Copyright dedecms51.com 版权所有" />
    <link href="{dede:global.cfg_templeturl/}/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="{dede:global.cfg_templeturl/}/Content/style.min.css" rel="stylesheet" />
    <!--[if lt IE 9]>
    <script src="{dede:global.cfg_templeturl/}/Scripts/html5shiv.min.js"></script>
    <![endif]-->
    <script src="{dede:global.cfg_templeturl/}/Scripts/jquery.min.js"></script>
	<script src="{dede:global.cfg_templeturl/}/Scripts/global.min.js"></script>
</head>

<body>
    <header>
    	<a href="/" target="_blank" class="logo"><img src="{dede:global.cfg_templeturl/}/Picture/logo.png" class="img-responsive" /></a>
        <h1>响应式布局检测工具</h1>
        <div class="input-group">
          <input type="text" class="url form-control" placeholder="请输入要检测的网址">
          <span class="input-group-btn">
            <button class="btn btn-default" type="button">检测</button>
          </span>
    	</div>
        <div class="right">
        	<a class="screenZoom">屏幕缩放</a>
        </div>
    </header>
    
    <section class="model">
        <div class="box">
            <h3>iPhone4/4s<u>竖屏</u>响应式布局检测</h3>
            <p>屏幕尺寸： 宽 320 × 高 480 ( px )<br /><u></u></p>
            <div class="device iphone4 portrait">
                <div class="screen">
                    <iframe src="demo.html" scrolling="auto" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <div class="box">
            <h3>iPhone4/4s<u>横屏</u>响应式布局检测</h3>
            <p>屏幕尺寸： 宽 480 × 高 320 ( px )<br /><u></u></p>
            <div class="device iphone4 landscape">
                <div class="screen">
                    <iframe src="demo.html" scrolling="auto" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <div class="box">
            <h3>iPhone5/5c/5s<u>竖屏</u>响应式布局检测</h3>
            <p>屏幕尺寸： 宽 320 × 高 568 ( px )<br /><u></u></p>
            <div class="device iphone5 portrait">
                <div class="screen">
                    <iframe src="demo.html" scrolling="auto" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <div class="box">
            <h3>iPhone5/5c/5s<u>横屏</u>响应式布局检测</h3>
            <p>屏幕尺寸： 宽 568 × 高 320 ( px )<br /><u></u></p>
            <div class="device iphone5 landscape">
                <div class="screen">
                    <iframe src="demo.html" scrolling="auto" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <div class="box">
            <h3>iPhone6<u>竖屏</u>响应式布局检测</h3>
            <p>屏幕尺寸： 宽 375 × 高 667 ( px )<br /><u></u></p>
            <div class="device iphone6 portrait">
                <div class="screen">
                    <iframe src="demo.html" scrolling="auto" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <div class="box">
            <h3>iPhone6<u>横屏</u>响应式布局检测</h3>
            <p>屏幕尺寸： 宽 667 × 高 375 ( px )<br /><u></u></p>
            <div class="device iphone6 landscape">
                <div class="screen">
                    <iframe src="demo.html" scrolling="auto" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <div class="box">
            <h3>iPhone6 Plus<u>竖屏</u>响应式布局检测</h3>
            <p>屏幕尺寸： 宽 414 × 高 736 ( px )<br /><u></u></p>
            <div class="device iphone6_plus portrait">
                <div class="screen">
                    <iframe src="demo.html" scrolling="auto" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <div class="box">
            <h3>iPhone6 Plus<u>横屏</u>响应式布局检测</h3>
            <p>屏幕尺寸： 宽 736 × 高 414 ( px )<br /><u></u></p>
            <div class="device iphone6_plus landscape">
                <div class="screen">
                    <iframe src="demo.html" scrolling="auto" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <div class="box">
            <h3>iPad<u>竖屏</u>响应式布局检测</h3>
            <p>屏幕尺寸： 宽 768 × 高 1024 ( px )<br /><u></u></p>
            <div class="device ipad portrait">
                <div class="screen">
                    <iframe src="demo.html" scrolling="auto" frameborder="0"></iframe>
                </div>
            </div>
        </div>
        <div class="box">
            <h3>iPad<u>横屏</u>响应式布局检测</h3>
            <p>屏幕尺寸： 宽 1024 × 高 768 ( px )<br /><u></u></p>
            <div class="device ipad landscape">
                <div class="screen">
                    <iframe src="demo.html" scrolling="auto" frameborder="0"></iframe>
                </div>
            </div>
        </div>
    </section>
    
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?a821a161aa4214f5ff5b8ca372960ebb";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
</body>
</html>